<template>
  <div class="profile" v-loading="loading">
    <div class="profile-header">
      <div class="profile-header-left">
        <div class="profile-user-avatar">
        </div>
      </div>
      <div class="profile-header-right">
        <div class="profile-header-right-inner">
          <div class="profile-item">
            <span class="profile-item-name">账号</span>
            <span class="profile-item-value">{{ user.id }}</span>
          </div>
          <div class="profile-item"><span class="profile-item-name">用户名</span><span class="profile-item-value">{{
            user.name }}<span class="emphasis">@<i>linghang</i></span></span></div>
          <div class="profile-item"><span class="profile-item-name">身份</span><span class="profile-item-value">{{
            user.role.name }}</span></div>
          <div class="profile-item">
            <span class="profile-item-name">部门任职</span>
            <el-tag style="margin-right: 10px;" v-for="(item, index) in JoinedDepartmentRole" :key="item">{{ item
            }}</el-tag>

          </div>
          <div class="profile-item">
            <span class="profile-item-name">项目参与</span>
            <el-tag style="margin-right: 10px;" v-for="(item, index) in participateProjectRole" type="warning"
              :key="item">{{ item }}</el-tag>
            <span v-if="participateProjectRole.length <= 0">暂无</span>
          </div>
        </div>
      </div>
    </div>
    <div class="profile-content">
      <div class="profile-content-technology">
        <div class="profile-tec-title">
          <div class="tec-title-left">
            <el-icon class="profile-title-icon">
              <Key />
            </el-icon>
            <span>技术栈</span>
            <el-tooltip content="此选项是可以声明自己掌握的技术，方便大家的经验交流和项目分配" placement="top">
              <span class="icomoon"></span>
            </el-tooltip>
          </div>
          <el-button circle @click="openEditTechnologyDialog">
            <el-icon>
              <Edit />
            </el-icon>
          </el-button>
        </div>
        <div class="profile-content-body">
          <div class="body-item" v-for="tech in user.technologies" :key="tech.id">
            <router-link :to="`/technologies/${tech.id}`">
              <el-card shadow="hover">
                <div>
                  <el-icon>
                    <Key />
                  </el-icon>
                  <div>{{ tech.name }}</div>
                </div>
              </el-card>
            </router-link>
          </div>
          <div class="nothing-note" v-if="user.technologies.length <= 0">
            暂时没有已掌握的技术
          </div>
        </div>
      </div>
      <div class="profile-content-project">
        <div class="profile-pro-title">
          <el-icon class="profile-title-icon">
            <Collection />
          </el-icon>
          <span>项目</span>
        </div>
        <div class="profile-content-body">
          <div class="body-item" v-for="project in user.projects" :key="project.id">
            <router-link :to="`/projects/${project.id}`">
              <el-card shadow="hover">
                <div>
                  <el-icon>
                    <FolderChecked />
                  </el-icon>
                  <div>{{ project.name }}</div>
                </div>
              </el-card>
            </router-link>
          </div>
          <div class="nothing-note" v-if="user.projects.length <= 0">
            暂时没有我参与的项目
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="添加技术" width="30%" :before-close="handleClose">
      <el-tabs stretch v-model="activename" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="添加技术" name="first">
          <el-form class="demo-form-inline">
            <el-form-item label="要添加的技术">
              <el-select v-model="addTechnology.tid" clearable placeholder="Select">
                <el-option v-for="item in technologyListOption" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="移除技术" name="second">
          <el-form class="demo-form-inline">
            <el-form-item label="要移除的技术">
              <el-select v-model="removeTechnology.tid" clearable placeholder="Select">
                <el-option v-for="item in user.technologies" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="submitForm">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { post } from '../../utils/common/api'
export default {
  data() {
    return {
      uid: this.$route.params.id,
      user: {
        name: '',
        id: undefined,
        role: {
          id: undefined,
          name: ''
        },
        projects: [],
        technologies: [
        ]
      },

      dialogVisible: false,

      addTechnology: {
        tid: undefined
      },

      removeTechnology: {
        tid: undefined,
      },

      technologyList: [],

      activename: 'first',

      loading: false,

      departmentList: [],

      JoinedDepartmentRole: [],

      projectList: [],

      // participateProjectRole: ['领航项目管理系统总设计师', '领航项目管理系统总设计师', '领航项目管理系统总设计师', '领航项目管理系统总设计师', '领航项目管理系统总设计师', '领航项目管理系统总设计师'],
      participateProjectRole: [],
    }
  },

  watch: {
    dialogVisible(newValue, oldValue) {
      if (oldValue === true && newValue === false) {
        // Reset form data when dialogVisible changes from true to false
        this.addTechnology.tid = undefined
        this.removeTechnology.tid = undefined
      }
    },
  },

  computed: {
    technologyListOption() {
      return this.technologyList.filter(item => {
        if (this.user.technologies.find(tec => tec.id === item.id)) {
          return false
        } else {
          return true
        }
      })
    }
  },

  methods: {
    async updateUserInfo() {
      try {
        let res = await post('/user/profile', { id: this.uid });
        this.user = res;
        document.title = res.name;
      } catch (error) {
        console.error('Error in updateUserInfo:', error);
      }
    },

    async getSystemTechnologyList() {
      const res = await post('/technology/all', {})
      this.technologyList = res.list
    },

    /** 获取部门身份数据 */
    async getDepartmentRole() {
      const res = await post('/department/all', {})
      this.departmentList = res.list
      this.departmentList.forEach(async (item) => {
        const res = await post('/department/profile', { id: item.id })
        res.members.forEach(item2 => {
          if (item2.id == this.uid) {
            this.JoinedDepartmentRole.push(`${res.name}${item2.role.name}`)
          }
        })
      })
    },

    /** 获取项目身份数据 */
    async getProjectRole() {
      const res = await post('/project/list', {
        uid: this.uid
      })
      this.projectList = res.list
      this.projectList.forEach(async (item) => {
        const res = await post('/project/profile', { id: item.id })
        res.members.forEach(item2 => {
          if (item2.id == this.uid) {
            this.participateProjectRole.push(`${res.name} ${item2.role.name}`)
          }
        })
      })
    },

    async loadData() {
      this.loading = true;
      try {
        await Promise.all([this.updateUserInfo(), this.getSystemTechnologyList(), this.getDepartmentRole(), this.getProjectRole()])
      } catch (error) {
        console.error('Error loading data:', error);
      } finally {
        this.loading = false;
      }
    },

    openEditTechnologyDialog() {
      this.dialogVisible = true
    },

    submitForm() {
      var that = this
      that.dialogVisible = false
      if (that.addTechnology.tid) {
        post('/user/technology/add', {
          uid: that.user.id,
          tid: that.addTechnology.tid
        }).then(function (res) {
          ElNotification({
            title: '添加成功',
            message: `新增了技术 No.${res.tid}`,
            type: 'success',
            position: 'bottom-right',
          })
          that.addTechnology.tid = ''
          that.updateUserInfo()
        })
      }
      if (that.removeTechnology.tid) {
        post('/user/technology/delete', {
          uid: that.uid,
          tid: that.removeTechnology.tid
        }).then(function (res) {
          ElNotification({
            title: '删除成功',
            message: `已将技术 No.${res.tid} 从技术栈中移除`,
            type: 'success',
            position: 'bottom-right',
          })
          that.removeTechnology.tid = ''
          that.updateUserInfo()
        })
      }
    },
  },

  mounted() {
    this.loadData()
  },
}
</script>

<style scoped>
.profile-header {
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-around;
  padding: 20px 0 40px 0;
}

.profile-header-left {
  box-sizing: border-box;
  width: 45%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.profile-user-avatar {
  width: 200px;
  height: 200px;
  border-radius: 10000px;
  background-color: #cccccc;
}

.profile-header-right {
  box-sizing: border-box;
  width: 55%;
  padding-left: 32px;
  display: flex;
  align-items: center;
}

.profile-header-right-inner {
  text-align: left;
}

.profile-item {
  padding: 4px 0;
  font-size: 18px;
}

.profile-item-name {
  display: inline-block;
  width: 120px;
  text-align: right;
  margin-right: 16px;
  font-weight: 600;
  color: #999999;
}

.emphasis {
  font-size: 10px;
}

.profile-content {
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 20px 0 0 0;
}

.profile-tec-title {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-button {
  margin-right: 55px;
}

.profile-pro-title {
  height: 50px;
  display: flex;
  align-items: center;
}

.tec-title-left {
  display: flex;
  align-items: center;
}

.profile-title-icon {
  margin: 0 10px;
}

.profile-content-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.body-item {
  width: 200px;
  height: 160px;
  padding: 10px;
  box-sizing: border-box;
}

.el-card {
  width: 100%;
  height: 100%;
  --el-card-padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icomoon {
  font-family: 'icomoon' !important;
  font-size: 13px;
  margin-left: 3px;
}

.nothing-note {
  font-size: 15px;
  color: #777777;
  margin: 0 auto;
}
</style>
